<template>
    <div class="fileportion" v-show="isShowContent">
      <div style="display:flex">
        <!-- <el-button @click="exportToPDF" v-show="isShowOutline">导出大纲</el-button> -->
        <el-button @click="exportTo_j_word" v-show="isShowOutline">导出大纲</el-button>
        <!-- <el-button @click="isShowOutline = !isShowOutline">{{ isShowOutline ? '预览大纲' : "返回" }}</el-button> -->
        <!-- <el-tooltip content="目前只支持上传pdf文件" placement="top"> -->
        <el-tooltip content="目前只支持上传按模板填写的xlsx文件" placement="top">
          <el-upload 
          :multiple="true"
          :file-list="fileList" 
          show-file-list="true"
          :on-success="handleUploadSuccessUpdate" 
          :on-error="handleUploadError"
          :data="uploadData"
          :action='baseURL + `/exam/T_subject/uploadDocumen`'  
          accept=".xlsx"
          >
          <!-- accept="application/pdf" -->
            <el-button style="margin-left:15px" size="big" type="warning">更新大纲</el-button>
          </el-upload>
        </el-tooltip>
        <el-button style="margin-left: 15px;" @click="getSyllabusTable">下载模板</el-button>
      </div>
      <div class="outerBox" v-show="isShowOutline">
        <div class="sidebar">
          <el-aside>
            <el-menu :default-active="activeMenu" @select="handleMenuSelect"  class="sidebar-menu">
              <el-menu-item index="course_Introduction_Skip">一、课程介绍</el-menu-item>
              <el-menu-item index="objectives_Skip">二、课程目标</el-menu-item>
              <el-menu-item index="objectives_And_Requirements_Skip">三、对应关系</el-menu-item>
              <el-menu-item index="course_Content_Skip">四、课程内容</el-menu-item>
              <el-menu-item index="teaching_Arrangement_Skip">五、教学进度安排</el-menu-item>
              <el-menu-item index="teaching_Method_Skip">六、课程教学方法</el-menu-item>
              <el-menu-item index="evaluation_Mode_Skip">七、课程考核方式</el-menu-item>
              <el-menu-item index="grade_Evaluation_Skip">八、成绩评定方法</el-menu-item>
              <el-menu-item index="goal_Attainment_Skip">九、达成度评价</el-menu-item>
              <el-menu-item index="target_Weight_Skip">十、课程目标权重</el-menu-item>
              <el-menu-item index="improve_Skip">十一、持续改进</el-menu-item>
              <el-menu-item index="reference_Book_Skip">十二、教材和参考书</el-menu-item>
            </el-menu>
          </el-aside>
        </div>
  
        <div id="pdf-content" class="content-to-export content-to-export_1" direction="vertical">
          <el-header class="headerTest">
            <h1 style="width: 100%;text-align: center;">
              {{subInfo.teaching_academy.includes('学院') ? subInfo.teaching_academy : subInfo.teaching_academy + '学院'}}《{{subInfo.subject}}》课程教学大纲
            </h1>
          </el-header>
          <div class="content-to-body">
            <el-card id="home_Page_Skip" class="box-card tableCard">
              <!-- <h1 v-if="!isShowTop" style="text-align: center; margin-top: -10px;">教学大纲封面</h1> -->
              <div style="display: flex; justify-content: center; text-align: center;">
                <table class="leftTableOF_tableCard" border style="width: 80%;">
                  <tbody>
                      <tr v-for="(item,index) in headData" :key="index">
                          <th>{{ item.label }}</th>
                          <td>{{ item.value }}</td>
                      </tr>
                  </tbody>
              </table>
              </div>
            </el-card>
            <el-card class="box-card">
              <div class="card-header" style="display: flex; justify-content: center; text-align: center;">
                <h2 style="margin-bottom:10px; margin-top: -10px;">《{{subInfo.subject}}》课程教学大纲</h2>
              </div>
              <el-descriptions :column="2" border>
                <el-descriptions-item label="课程编码" label-align="center" align="center">
                  {{ outlineFormData.code }}
                </el-descriptions-item>
                <el-descriptions-item label="课程性质" label-align="center" align="center">
                  {{ outlineFormData.quality }}
                </el-descriptions-item>
                <el-descriptions-item label="课程名称" label-align="center" align="center" span="2">
                  {{ outlineFormData.cName }}
                </el-descriptions-item>
                <el-descriptions-item label="英文名称" label-align="center" align="center" span="2">
                  {{ outlineFormData.eName }}
                </el-descriptions-item>
                <!-- <el-descriptions-item label="所教班级" label-align="center" align="center" >
                  {{ outlineFormData.classname }}
                </el-descriptions-item>
                <el-descriptions-item label="所教学院" label-align="center" align="center">
                  {{ outlineFormData.teacher_unit }}
                </el-descriptions-item>
                <el-descriptions-item label="所教学年" label-align="center" align="center">
                  {{ outlineFormData.teacher_grade }}
                </el-descriptions-item> -->
                <el-descriptions-item label="学识学分" label-align="center" align="center">
                  {{ outlineFormData.creAndHours }}
                </el-descriptions-item>
                <el-descriptions-item label="其中实验/实践学识" label-align="center" align="center">
                  {{ outlineFormData.praHours }}
                </el-descriptions-item>
                <el-descriptions-item label="开课单位" label-align="center" align="center">
                  {{ outlineFormData.class_unit }}
                </el-descriptions-item>
                <el-descriptions-item label="适用专业" label-align="center" align="center">
                  {{ outlineFormData.majors }}
                </el-descriptions-item>
                <el-descriptions-item label="先修课程" label-align="center" align="center" span="2">
                  {{ outlineFormData.per_class }}
                </el-descriptions-item>
                <el-descriptions-item label="授课语言" label-align="center" align="center">
                  {{ outlineFormData.language }}
                </el-descriptions-item>
                <el-descriptions-item label="课程网址" label-align="center" align="center" span="2">
                  {{ outlineFormData.class_com }}
                </el-descriptions-item>
              </el-descriptions>
              <div id="course_Introduction_Skip" class="card-header">
                <h4>一、课程介绍</h4>
              </div>
              <div class="font_content" style="text-indent: 2em;" >
                <span>{{ courseInfo }}</span>
              </div>
              <div id="objectives_Skip" class="card-header">
                <h4>二、课程目标</h4>
              </div>
              <div class="font_content" style="text-indent: 2em;">
                <span>
                  通过本课程的学习，使学生理解数据的逻辑结构和存储结构基本概念及其相关算法；具备基本的、
                  良好的算法理论知识与设计技能，能用于编制高效可靠的程序；针对实际问题，能合理地选择相应
                  的数据结构，设计有效的算法，并进行实现与分析。
                </span>
              </div>
              <!-- white-space: pre-line;    font-size:1em; -->
              <div class="font_content" style="text-indent: 2em;" v-for="course in courseAim" :key="course.id">
                <span> {{ course.target_name }}{{  course.target_content }}</span>
              </div>
              <div id="objectives_And_Requirements_Skip" class="card-header">
                <h4>三、课程目标与毕业要求指标点的对应关系</h4>
              </div>
              <table style="width: 100%">
                  <thead>
                      <tr>
                          <th style="width: 180px">课程目标</th>
                          <th style="width: 180px">毕业要求指标点名称</th>
                          <th style="width: 100px">等级</th>
                      </tr>
                  </thead>
                  <tbody>
                      <tr v-for="(row, index) in getRelation" :key="index">
                          <td>{{ row.class_target_name }}</td>
                          <td>{{ row.index_point_name }}</td>
                          <td>
                              <span v-if="row.between === 'L'" style="color: green">L</span>
                              <span v-else-if="row.between === 'M'" style="color: orange">M</span>
                              <span v-else-if="row.between === 'H'" style="color: red">H</span>
                          </td>
                      </tr>
                  </tbody>
              </table>
              <div id="course_Content_Skip" class="card-header">
                <h4>四、课程内容</h4>
              </div>
              <!-- <el-table :data="courseData" :span-method="objectSpanMethod" border style="width: 100%">
                <el-table-column prop="unit_knowledge_name" label="知识单元" align="center" />
                <el-table-column prop="tec_content" label="教学内容" align="center" />
                <el-table-column prop="tec_request" label="教学要求" align="center" />
                <el-table-column prop="class_target_name" label="支撑课程目标" align="center" />
              </el-table> -->
              <table style="width: 100%">
                  <thead>
                      <tr>
                          <th class="wide">知识单元</th>
                          <th class="wide">教学内容</th>
                          <th class="wide">教学要求</th>
                          <th class="wide">支撑课程目标</th>
                      </tr>
                  </thead>
                  <tbody>
                      <!-- <tr v-for="(row, index) in courseData" :key="index">
                          <td :rowspan="2" :style="index-1 ? 'dispaly:black' : 'display:none' ">{{ row.unit_knowledge_name }}</td>
                          <td>{{ row.unit_knowledge_name }}</td>
                          <td>{{ row.tec_content }}</td>
                          <td>{{ row.tec_request }}</td>
                          <td>{{ row.class_target_name }}</td>
                      </tr> -->
                      <template v-for="(row, index) in courseData" :key="index">
                          <tr v-if="index === 0 || row.unit_knowledge_name !== courseData[index - 1].unit_knowledge_name">
                          <td :rowspan="calculateRowspan(row)" class="wide">{{ row.unit_knowledge_name }}</td>
                          <td class="wide">{{ row.tec_content }}</td>
                          <td class="wide">{{ row.tec_request }}</td>
                          <td class="wide">{{ row.class_target_name }}</td>
                          </tr>
                          <tr v-else>
                          <td class="wide">{{ row.tec_content }}</td>
                          <td class="wide">{{ row.tec_request }}</td>
                          <td class="wide">{{ row.class_target_name }}</td>
                          </tr>
                      </template>
                  </tbody>
              </table>
              <div id="teaching_Arrangement_Skip" class="card-header">
                <h4>五、课程教学进度安排</h4>
              </div>
              <!-- <el-table :data="teachingSchedule" show-summary style="width: 100%">
                <el-table-column prop="unit_knowledge_name" label="名称" align="center" />
                <el-table-column prop="all_time" label="总学时" align="center" />
                <el-table-column label="学时分配" align="center">
                  <el-table-column prop="theory_time" label="理论" align="center" />
                  <el-table-column prop="practice_time" label="实验实践" align="center" />
                </el-table-column>
              </el-table> -->
              <table border style="width: 100%">
                  <thead>
                      <tr>
                          <th rowspan="2">名称</th>
                          <th rowspan="2">总学时</th>
                          <th colspan="2">学时分配</th>
                          <!-- <th rowspan="2">签字（章）</th> -->
                      </tr>
                      <tr>
                          <th>理论</th>
                          <th>实验实践</th>
                      </tr>
                  </thead>
                  <tbody>
                      <tr v-for="(item, index) in teachingSchedule" :key="index">
                          <td>{{ item.unit_knowledge_name }}</td>
                          <td>{{ item.all_time }}</td>
                          <td>{{ item.theory_time }}</td>
                          <td>{{ item.practice_time }}</td>
                      </tr>
                      <tr>
                          <td>合计</td>
                          <!-- 使用计算属性或方法来计算合计值 -->
                          <td>{{ getTotal('all_time') }}</td>
                          <td>{{ getTotal('theory_time') }}</td>
                          <td>{{ getTotal('practice_time') }}</td>
                      </tr>
                  </tbody>
              </table>
              <div id="teaching_Method_Skip" class="card-header">
                <h4>六、课程教学方法</h4>
              </div>
              <div style="white-space: pre-line;">{{ methodContent }}</div>
              <div id="evaluation_Mode_Skip" class="card-header">
                <h4>七、课程考核方式</h4>
              </div>
              <div>
                <div  style="text-indent: 2em;">考核方式：{{ examMethodContent.assess_manner  }}</div>
                <div  style="text-indent: 2em;">考试方式：{{ examMethodContent.examination_manner  }}</div>
                <div  style="text-indent: 2em;">考试时间：{{ examMethodContent.examination_time  }}</div>
                <div  style="text-indent: 2em;">评定依据：{{ examMethodContent.content  }}
                </div>
              </div>
              <div id="grade_Evaluation_Skip" class="card-header">
                <h4>八、课程考核成绩评定方法</h4>
              </div>
              <div class="table-container" style="text-align:center;">
                <table border style="width: 80%;">
                  <thead>
                      <tr>
                          <th colspan="2">一级考核指标</th>
                          <th colspan="3">二级考核指标</th>
                      </tr>
                      <tr>
                          <th>指标内容</th>
                          <th>分数比例</th>
                          <th>指标内容</th>
                          <th colspan="2">支撑毕业要求指标点及所占比例</th>
                      </tr>
                  </thead>
                  <tbody>
                      <!-- <tr v-for="(item, index) in oneExamine" :key="index">
                          <td>{{ item.content }}</td>
                          <td>{{ item.proportion }}</td>
                          <td>{{ item.content2 }}</td>
                          <td>{{ item.Point2 }}</td>
                          <td>{{ item.weight2 }}</td>
                      </tr> -->
                      <template v-for="(row, index) in oneExamine" :key="index">
                          <tr v-if="index === 0 || row.content !== oneExamine[index - 1].content">
                              <td :rowspan="calculateExamineRowspan(row)" class="wide">{{ row.content }}</td>
                              <td :rowspan="calculateExamineRowspan(row)" class="wide">{{ row.proportion }}</td>
                              <td :rowspan="calculateExamineRowspan(row)" class="wide">{{ row.content2 }}</td>
                              <td class="wide">{{ row.Point2 }}</td>
                              <td class="wide">{{ row.weight2 }}</td>
                          </tr>
                          <tr v-else>
                              <td class="wide">{{ row.Point2 }}</td>
                              <td class="wide">{{ row.weight2 }}</td>
                          </tr>
                      </template>
                  </tbody>
                </table>
              </div>
              <div class="table-container">
                          <!-- 右侧表格  style="width: 50%; float: left;"  :show-header=false -->
                <!-- <el-table :data="gradeEvaluaationData.slice(2, 10)" style="width: 50%; float: left;" border> -->
                  <!-- <el-table :data="twoExamine" border>
                  <el-table-column label="二级考核指标" align="center">
                    <el-table-column prop="content" label="指标内容" align="center" />
                    <el-table-column label="支撑毕业要求指标点及所占比例" align="center" >
                      <el-table-column prop="point_name" label="支撑毕业要求指标点" align="center"/>
                      <el-table-column prop="proportion" label="占比" align="center"/>
                    </el-table-column>
                  </el-table-column>
                </el-table> -->
                <!-- <table border style="width: 80%">
                  <thead>
                      <tr>
                          <th colspan="3">二级考核指标</th>
                      </tr>
                      <tr>
                          <th>指标内容</th>
                          <th colspan="2">支撑毕业要求指标点及所占比例</th>
                      </tr>
                  </thead>
                  <tbody>
                      <tr v-for="(item, index) in twoExamine" :key="index">
                          <td>{{ item.content }}</td>
                          <td>{{ item.point_name }}</td>
                          <td>{{ item.proportion }}</td>
                      </tr>
                  </tbody>
                </table> -->
              </div>
              <br/>
              <table border style="width: 100%">
                  <thead>
                      <tr>
                          <th colspan="">课程目标</th>
                          <th colspan="">支撑环节</th>
                          <th colspan="">权重系数</th>
                      </tr>
                  </thead>
                  <tbody>
                      <!-- <tr v-for="(item, index) in examineWeight" :key="index">
                          <td>{{ item.class_target_name }}</td>
                          <td>{{ item.suppore }}</td>
                          <td>{{ item.weight }}</td>
                      </tr> -->
                      <template v-for="(row, index) in examineWeight" :key="index">
                          <tr v-if="index === 0 || row.class_target_name !== examineWeight[index - 1].class_target_name">
                              <td :rowspan="calculateAimRowspan(row)" class="wide">{{ row.class_target_name }}</td>
                              <td class="wide">{{ row.suppore }}</td>
                              <td class="wide">{{ row.weight }}</td>
                          </tr>
                          <tr v-else>
                              <td class="wide">{{ row.suppore }}</td>
                              <td class="wide">{{ row.weight }}</td>
                          </tr>
                      </template>
                  </tbody>
              </table>
              <!-- </div> -->
              <div style="text-indent: 2em;margin-top:10px">
                <!-- 说明：作业1和2为线性表作业，含顺序存储与链式存储；作业3为树作业，作业4为图作业。
                试题集合X1建议为选择题，考核各章的基本知识，包括数据结构基本概念、各种数据结构
                及其运算、算法分析；试题集合X2建议为应用分析题，考核算法分析与应用，主要是树、图、
                查找和排序算法；试题集合X3建议为算法设计题，主要考核线性表、树和图的算法设计。 -->
                说明：{{ examineIllustrate }}
              </div>
              <div id="goal_Attainment_Skip" class="card-header">
                <h4>九、课程目标达成度评价</h4>
              </div>
              <div>
                  <div>1、课程目标达成度评价机制</div>
                  <div style="text-indent: 1em;">（1）评价机构</div>
                  <p style="text-indent: 2em;">{{ evaluateContent1.agencies }}</p>
                  <div style="text-indent: 1em;">（2）数据来源</div>
                  <p style="text-indent: 2em;">{{ evaluateContent1.data }}</p>
                  <div style="text-indent: 1em;">（3）评价周期</div>
                  <p style="text-indent: 2em;">{{ evaluateContent1.cycle }}</p>
                  <div>2、课程目标达成评价方法</div>
                  <div style="text-indent: 1em;">（1）各个课程目标权重值的确定</div>
                  <p style="white-space: pre-line;text-indent: 2em;">{{ evaluateContent2.one }}</p>
                  <div style="text-indent: 1em;">（2）各个课程目标达成度的计算</div>
                  <p style="white-space: pre-line;text-indent: 2em;">{{ evaluateContent2.two }}</p>
                  <div style="text-indent: 1em;">（3）课程的整体目标达成度评价标准</div>
                  <p style="white-space: pre-line;text-indent: 2em;">{{ evaluateContent2.three }}</p>
              </div>
              <div id="target_Weight_Skip" class="card-header">
                <h4>十、本课程各个课程目标的权重</h4>
              </div>
              <div>
                <p style="text-indent: 2em;">依据第八部分中的课程目标达成度评价方法，计算得到本课程的各个课程目标的权重如下：</p>
              </div>
              <table border style="width: 100%">
                  <thead>
                      <tr>
                          <th colspan="">课程目标</th>
                          <th colspan="" v-for="(value,index) in weightData" :key="index">{{ value.class_target_name }}</th>
                          <!-- <th colspan="">权重系数</th> -->
                      </tr>
                  </thead>
                  <tbody>
                      <td>权值wi</td>
                      <td v-for="(value,index) in weightData" :key="index">{{ value.weights }}</td>
                  </tbody>
              </table>
              <div id="improve_Skip" class="card-header">
                <h4>十一、持续改进</h4>
              </div>
              <div>
                <p style="text-indent: 2em;">{{ improveData }}</p>
              </div>
              <div id="reference_Book_Skip" class="card-header">
                <h4>十二、教材和参考书目</h4>
              </div>
              <div style="margin-bottom: 20%;">
                  <div>1、教材</div>
                  <p style="white-space: pre-line;line-height:26px;">{{ bookData.t_book }}</p>
                  <div>2、参考书目</div>
                  <p style="white-space: pre-line;line-height:26px;">{{ bookData.refer_book }}</p>
                  <div>附：课程作业（实验报告）评分依据</div>
                  <p style="white-space: pre-line;line-height:26px;">{{ bookData.basis }}</p>
              </div>
            </el-card>
          </div>

        </div>
      </div>
    </div>
    <div class="fileportion" v-show="!isShowContent" style="margin-top:20vh; justify-content:center; align-items:center; text-align: center;">
      <p style="font-size: 30px;">{{subInfo.subject}}课程-{{ subInfo.grade_name }}-{{subInfo.class_name}}班没有教学大纲，请按照模板填写后上传！</p>
      <div style="display: flex; justify-content: center;margin-right: 10px;">
        <el-upload 
          :multiple="true"
          :file-list="fileList" 
          show-file-list="false"
          :on-success="handleUploadSuccess" 
          :data="uploadData"
          :action='baseURL + `/exam/T_subject/uploadDocumen`'  
          accept=".xlsx"
          >
          <!-- accept="application/pdf" -->
          <el-button size="big" type="warning">点击上传</el-button>
        </el-upload>
        <el-button style="margin-left: 10px;" @click="getSyllabusTable">下载模板</el-button>
      </div>
      <span style="display: inline;">目前只支持上传按模板填写的xlsx文件</span>

      <!-- <span style="display: inline;">目前只支持上传pdf文件</span> -->
    </div>
    <div class="fileportion">
      <vue-office-docx :src="src" v-if="!isShowOutline" /> <!-- 根据 hasData 的值来决定是否显示 VueOfficeDocx 组件 -->
      <vue-office-pdf :src="src" v-if="!isShowOutline" style="background:while;" />
      <iframe v-show="!isShowOutline" id="pdfViewer" width="100%" height="800px"></iframe>
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted, nextTick, reactive,computed } from 'vue';
  import { useClassStore } from '@/stores/index.js'
  import { everyWeightData, gradeEvaluaationData, objectWeightData, courseContentData, evaluationConfirmationData, summaryImprovementData, courseAchievementData, examPerformanceData, classPerformanceData, homeworkPerformanceData, courseBasicInfo, quantitativeAnalysisData, spanMethod } from './dataSET'
  import { getBeginData,uploadSyllabusFile,getCourseDes,getCourseIntroduce,getCourseAim,getCourseName,getIndexPoint,getNameAndPoint,getKnowledgeContent,getKnowledgeTarget,getCourseSchedule,getCourseMethods,getExamineMethod,getWeightSupport,getWeightIllustrate,getExamineTarget,getExamineTargetTow,getExamineTargetChart,getEvaluationMechanism,getEvaluationWay,getTargetWeight,getContinuousImprovement,getBookAndBibliography } from '@/api/syllabus.js'
  import { getSyllabusData,getSyllabusPath } from '@/api/course.js'
  import { baseURL } from '@/utils/request';
  import { ElMessage, ElMessageBox } from 'element-plus'
  import html2pdf from 'html2pdf.js'
  import VueOfficeDocx from '@vue-office/docx'
  import VueOfficePdf from '@vue-office/pdf'
  // import VueOfficeExcel from '@vue-office/excel'
  import '@vue-office/docx/lib/index.css'
  // import '@vue-office/excel/lib/index.css'
  
  // 激活的菜单项，默认为第一个
  const activeMenu = ref('home_Page_Skip');
  // const syllabusId = ref()//大纲id
  const subInfo = reactive({
    syllabusId:0,
    subId:0,//可以根据路由拿到
    class_name:'',
    grade_name:'',
    subject:'',
    teaching_academy:''
  })
  //一进入页面，则把该班级的大纲id给页面
  const classMessage = useClassStore()
  // syllabusId.value = classMessage.classInfo.id
  subInfo.syllabusId = classMessage.classInfo.user_and_acs_id//大纲id
  subInfo.class_name = classMessage.classInfo.class_name
  subInfo.grade_name = classMessage.classInfo.grade_name
  subInfo.subject = classMessage.classInfo.subject
  subInfo.subId = classMessage.classInfo.subId
  subInfo.teaching_academy = classMessage.classInfo.teaching_academy
  
  //判断是否展示pdf内容
  const isShowContent = ref(false)///////////////////////////////////////////
  //是否展示大纲，预览大纲
  const isShowOutline = ref(true)
  
  const src = ref('');
  const fileList = ref([]);
  const hasData = ref(false); // 添加一个布尔值用于表示是否有数据
  
  //获取大纲路径
  const getFilePath = async () =>{
    const res = await getSyllabusPath(subInfo.syllabusId)
    //如果大纲有路径则把路径发送过去过去文件信息
    if(res.data.code === 203){
      ElMessage({
              type: 'error',
              message: `${res.data.msg}，请上传教学大纲！`,
          });
          return
      // }else if(res.data.data.Path){
      }else if(res.data.data[0].Path){
        syllabusAllPort()
        isShowContent.value = true;
    //   const respath = await getSyllabusData(res.data.data.Path)
    //   // 将二进制数据转换为 Blob 对象
    //   const blob = new Blob([respath.data], { type: 'application/pdf' });
  
    //   // 创建一个指向 Blob 对象的 URL
    //   const pdfUrl = URL.createObjectURL(blob);
  
    //   // 将 URL 赋值给 iframe 的 src 属性
    //   document.getElementById('pdfViewer').src = pdfUrl;
    //   if(res.status === 200){
    //     syllabusAllPort()
    //     isShowContent.value = true;
    //   }
    }
  }
  
  // 存储数据到 localStorage 中
  const beforeUpload = (file) => {
    let reader = new FileReader();
    reader.readAsArrayBuffer(file);
    reader.onload = (loadEvent) => {
      let arrayBuffer = loadEvent.target.result;
      src.value = arrayBuffer;
  
      // 将 ArrayBuffer 转换为 Uint8Array
      let uint8Array = new Uint8Array(arrayBuffer);
      // 将 Uint8Array 转换为 Base64 字符串
      let base64String = btoa(String.fromCharCode.apply(null, uint8Array));
      //存在本地内存
      localStorage.setItem('outline', base64String);
      // hasData.value = true; // 数据加载后设置 hasData 为 true，表示有数据
      isShowContent.value = true; // 数据加载后设置 hasData 为 true，表示有数据
    };
    //true允许上传
    return true;
  };
  
  //大纲id用于上传文件时和文件一起发送过去给后端
  const uploadData = {
    // id:subInfo.syllabusId
    // t_user_and_a_c_s_id:1,
    t_user_and_a_c_s_id:subInfo.syllabusId,
    sub_id:subInfo.subId,
  }
  
  //监听上传成功事件
  const handleUploadSuccess = async (response, file, fileList) =>{
    console.log(response,'success');
//   //如果大纲成功上传了文件，则获取页面数据
//     // getHeadData()//获取头部封面信息
//     // pdfUrl.value = response.data.path
//     const res = await getSyllabusData(response.data.path)
//     // 将二进制数据转换为 Blob 对象
//     const blob = new Blob([res.data], { type: 'application/pdf' });
  
//     // 创建一个指向 Blob 对象的 URL
//     const pdfUrl = URL.createObjectURL(blob);
  
//     // 将 URL 赋值给 iframe 的 src 属性
//     document.getElementById('pdfViewer').src = pdfUrl;
//     if(res.status === 200){
//       ElMessage({
//               type: 'success',
//               message: '文件上传成功！',
//           });
//     }
    if(response.code === 203){
      ElMessage({type:'error',message:`${response.msg}`})
      return 
    }
    isShowContent.value = true;
    syllabusAllPort()
      ElMessage({type: 'success',message: '文件上传成功！'});
  }
    //监听上传成功事件
  const handleUploadSuccessUpdate = async (response, file, fileList) =>{
    console.log(response,'responseresponse');
    isShowContent.value = true;
    if(response.success){
      syllabusAllPort()
      // 刷新页面
      await location.reload();
      ElMessage({type: 'success',message: '文件上传成功！'});
    }else{
      await location.reload();
      
      // ElMessage({type: 'error',message: `${response.msg}`});
      
    }

  }
  
  //监听文件上传失败
  const handleUploadError = async (err, file, fileList) =>{
    ElMessage({type: 'error',message: '文件上传失败！',});
  }
  // 检查本地存储中是否有数据
  const checkLocalData = () => {
    const storedData = localStorage.getItem('outline');
    if (storedData) {
      // 将 Base64 字符串转换为 ArrayBuffer
      let decodedString = atob(storedData);
      let buffer = new ArrayBuffer(decodedString.length);
      let uint8Array = new Uint8Array(buffer);
      for (let i = 0; i < decodedString.length; i++) {
        uint8Array[i] = decodedString.charCodeAt(i);
      }
      src.value = buffer;
      isShowContent.value = true;
    }
  };
  
  // 定义预览PDF的方法
  const previewPDF = () => {
    // 获取要转换为PDF的元素
    const element = document.getElementById('pdf-content');
    // 设置PDF转换选项
    const opt = {
      margin: 1, // 设置PDF边距为1英寸
      filename: 'document.pdf', // 设置生成的PDF文件名为document.pdf
      image: { type: 'jpeg', quality: 0.98 }, // 设置图片类型为jpeg，并指定质量为0.98
      html2canvas: { scale: 2 }, // 设置html2canvas的缩放比例为2
      jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' } // 设置jsPDF的单位为英寸，格式为letter，方向为纵向
    };
    // 调用html2pdf库的方法进行PDF转换，并在新窗口中预览
    html2pdf().from(element).set(opt).outputPdf('dataurlnewwindow');
  };
  
import $ from 'jquery'
import '@/utils/jqureyWordExport'
//   const exportTo_j_word=()=>{
//     isShowTop.value = !isShowTop.value

//     let date = new Date().toLocaleDateString()
//     let docx = '课程达成度分析'
//     // $(".content-to-export_1").wordExport(docx);
//         // 导出前过滤掉 display: none 的元素
//     let contentToExport = $(".content-to-export_1").clone(); // 克隆要导出的内容
//     contentToExport.find("[style*='display: none']").remove(); // 移除 display: none 的元素
//     contentToExport.wordExport(docx); // 导出剩余的内容

// }
const exportTo_j_word = () => {
    isShowTop.value = !isShowTop.value;

    let date = new Date().toLocaleDateString();
    let docx = `《${subInfo.subject}》课程教学大纲`;
    
    // 克隆要导出的内容
    let contentToExport = $(".content-to-export_1").clone();
    
    // 移除 display: none 的元素
    contentToExport.find("[style*='display: none']").remove();

      // 处理文本节点中的换行符
    contentToExport.find('p').each(function() {
        let text = $(this).html();
        $(this).html(text.replace(/(?:\r\n|\r|\n)/g, '<br>'));
    });

    // 导出剩余的内容
    contentToExport.wordExport(docx);

}

//下载模板
const getSyllabusTable = async () =>{
    let a = document.createElement("a");
    a.href = "./public/static/教学大纲模板 .xlsx";
    a.download = "教学大纲模板.xlsx";
    a.style.display = "none";
    document.body.appendChild(a);
    a.click();
    a.remove();

    let a1 = document.createElement("a");
    a1.href = "./public/static/教学大纲模板示例.xlsx";
    a1.download = "教学大纲模板示例.xlsx";
    a1.style.display = "none";
    document.body.appendChild(a1);
    a1.click();
    a1.remove();
}
  // const exportToPDF = () => {
  //     const element = document.querySelector('.content-to-export'); // Select the element containing the content to export
  //     const options = {
  //         margin: [10, 5, 10, 5], // 上右下左的边距
  //         filename: 'exported-file.pdf',
  //         image: { type: 'jpeg', quality: 0.98 },
  //         html2canvas: { scale: 2, logging: true, dpi: 192, letterRendering: true, pagebreak: { mode: ['avoid-all', 'css', 'legacy'] } },
  //         // jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' }
  //         jsPDF: { unit: 'mm', format: 'a4', orientation: 'landscape' }
  
  //     };
  
  //     // Use html2pdf() to apply the options and then save the PDF
  //     html2pdf().from(element).set(options).save();
  // }
  
  // const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
  //   if (columnIndex === 0) {
  //     const currentChapter = row.chapter;
  //     let rowspan = 1;
  //     // 从当前行往下搜索，找到相同章节的行数
  //     for (let i = rowIndex + 1; i < courseContentData.length; i++) {
  //       if (courseContentData[i].chapter === currentChapter) {
  //         rowspan++;
  //       } else {
  //             return {
  //             rowspan: 0,
  //             colspan: 0,
  //             };
  //         break;
  //       }
  //     }
  //     return {
  //       rowspan: rowspan,
  //       colspan: 1,
  //     };
  //   }
  // if(courseContentData.length > 0){
  //     let i = 0
  //     const json = {}
  //     courseContentData,forEach((item,index) =>{
  //         if(index && item.chapter === courseContentData[index - 1].chapter){
  //             json[i] += 1
  //         }else{
  //             i = index
  //             jsoon[i] = 1
  //         }
  //     })
  
  // }
  // };
  
  const objectSpanMethod = ({
    row,
    column,
    rowIndex,
    columnIndex,
  }) => {
    if (columnIndex === 0) {
      if (rowIndex % 5 === 0) {
        return {
          rowspan: 5,
          colspan: 1,
        }
      } else {
        return {
          rowspan: 0,
          colspan: 0,
        }
      }
    }
  }
  const objectSpanMethod1 = ({
    row,
    column,
    rowIndex,
    columnIndex,
  }) => {
    if (columnIndex === 0) {
      if (rowIndex % 3 === 0) {
        return {
          rowspan: 3,
          colspan: 1,
        }
      } else {
        return {
          rowspan: 0,
          colspan: 0,
        }
      }
    }
  }
  const objectSpanMethod2 = ({
    row,//当前行
    column,////当前列
    rowIndex,//当前行号
    columnIndex,//当前列号
  }) => {
    if (columnIndex === 0) {
      if (rowIndex === 2) {
        return {
          rowspan: 3,
          colspan: 1,
        }
      } else {
        return {
          rowspan: 0,
          colspan: 0,
        }
      }
    }
  }
  
  const isShowTop = ref(false)
  
  const syllabusAllPort = () =>{
  //获取开头封面的数据
  getHeadData()
  //获取课程描述
  getOCourseInfo()
  //课程介绍
  getCourseTarget()
  //课程目标与毕业要求指标点的对应关系
  getTargetAndRequest()
  //4课程内容查询
  getAimContent()
  ////课程教学进度查询
  getPlan()
  //获取教学方法
  getTeachingMethod()
  //7考核方式
  getExamMethod()
  //8课程考核成绩评定方法  考核评定
  getExamineAssess()
  //9课程目标达成度评价
  getFinishEvaluate()
  // 10本课程各个课程目标的权重
  getAimweight()
  //11持续改进
  getImproveData()
  //12十二、教材和参考书目
  getBookData()
  
  }
  
  //封面数据
  const headData = ref([
    { label: '课程编码', value: '空' },
    { label: '适用专业', value: '软件工程、网络工程、物联网工程、计算机科学与技术' },
    { label: '课程负责人', value: '钟秀玉 ' },
    { label: '审核人', value: '空' },
    { label: '编制单位', value: '计算机学院软件工程系' },
    { label: '编制时间', value: '2023.211' }
    // { label: '课程编码', value: '' },
    // { label: '适用专业', value: '' },
    // { label: '课程负责人', value: '' },
    // { label: '审核人', value: '' },
    // { label: '编制单位', value: '' },
    // { label: '编制时间', value: '' }
  ])
  
  //获取开头封面的数据
  const getHeadData = async () =>{
    const res = await getBeginData(subInfo.syllabusId)
    const resData = res.data.data[0]
    headData.value[0].value = resData.code
    headData.value[1].value = resData.majors
    headData.value[2].value = resData.Leader
    headData.value[3].value = resData.Reviewers
    headData.value[4].value = resData.unit
    headData.value[5].value = resData.make_time
  
  }
  
  //获取课程描述
  const outlineFormData = reactive({})
  const getOCourseInfo = async () =>{
    const res = await getCourseDes(subInfo.syllabusId)
    const resData = res.data.data[0]
    //将获取到的数据渲染到页面上
    outlineFormData.code = resData.code;
    outlineFormData.quality = resData.quality;
    outlineFormData.cName = resData.cName;
    outlineFormData.eName = resData.eName;
    outlineFormData.creAndHours = resData.creAndHours;
    outlineFormData.praHours = resData.praHours;
    outlineFormData.class_unit = resData.class_unit;
    outlineFormData.majors = resData.majors;
    outlineFormData.per_class = resData.per_class;
    outlineFormData.class_com = resData.class_com;
    outlineFormData.language = resData.language;
    outlineFormData.teacher_unit = resData.teacher_unit;
    outlineFormData.teacher_grade = resData.teacher_grade;
    outlineFormData.classname = resData.classname;
  
  }
  
  //课程介绍
  const courseInfo = ref()
  const getIntroduceInfo = async () =>{
    const res = await getCourseIntroduce(subInfo.syllabusId)
    console.log(res,'erwsss');
    const resData = res.data.data[0]
    courseInfo.value = resData.content
  }
  getIntroduceInfo()
  
  //课程目标
  const courseAim = reactive([])
  const getCourseTarget = async () =>{
    const res = await getCourseAim(subInfo.syllabusId)
    const resData = res.data.data
    resData.forEach(index => {
      courseAim.push(index)
    })
  }
  
  let evaluationMatrix = reactive([{
    criteria:'',
    tar1:'',
    tar2:'',
    tar3:'',
  }])
  
  let pointArr = reactive([{
    label:'',
    prop:''
  }])
  //课程目标与毕业要求指标点的对应关系
  const getRelation = reactive([])
  const getTargetAndRequest = async () =>{
    //   //课程目标名称查询
    //  const resName = await getCourseName(1)
    //  //动态定义列长度和值
    //  evaluationMatrix = Array.from({ length: resName.data.data.length }, (value,index) => ({
    //       criteria: '',
    //       [`tar${index+1}`]: '',
    //       // tar2: '',
    //       // tar3: ''
    //   }));
    //  resName.data.data.forEach((value,index)=>{
    //   evaluationMatrix[index].criteria = value
    //   // evaluationMatrix[index].`tar${index+1}` = ''
    //   console.log(index,value,'index');
    //  })
    //  console.log('evaluationMatrix',evaluationMatrix);
    //  //获取指标点
    //  const resPoint = await getIndexPoint(1)
    //  //动态定义行长度和值
    //  pointArr = Array.from({length:resPoint.data.data.length},(value,index) =>({
    //   label:'',
    //   prop:`tar${index+1}`
    //  }))
    //  resPoint.data.data.forEach((value,index) =>{
    //   pointArr[index].label = value
    //  })
    //  console.log('pointArr',pointArr);
     //两者的关系查询
     const resRelation = await getNameAndPoint(subInfo.syllabusId)
     resRelation.data.data.forEach((value,index) =>{
      getRelation.push(value)
     })
  }
  
  //4课程内容查询
  const courseData = reactive([
    // {
    //   class_target_id:0,
    //   class_target_name:'',
    //   unit_knowledge_id:0,
    //   unit_knowledge_name:'',
    //   tec_content:'',
    //   tec_request:''
    // }
  ])
//   const mergedCourseData = computed(() => {
//   let mergedData = [];
//   let currentUnit = null;

//   courseData.forEach((row, index) => {
//     if (index === 0 || row.unit_knowledge_name !== currentUnit) {
//       currentUnit = row.unit_knowledge_name;
//       mergedData.push(row);
//     } else {
//       // Do nothing for rows with the same unit_knowledge_name
//     }
//   });

//   return mergedData;
// });
//计算有几个相同的数据，然后返回决定几行合并
function calculateRowspan(row) {
  let count = 1;
//   获取courseData中第一个和row相同的数据的索引，如果数组中不存在满足条件的元素，则返回 -1
  const currentIndex = courseData.findIndex(item => item === row);
  for (let i = currentIndex + 1; i < courseData.length; i++) {
    if (courseData[i].unit_knowledge_name === row.unit_knowledge_name) {
      count++;
    } else {
      break;
    }
  }
  return count;
}
  const getCourseContent = async () =>{
    // 单元知识点对应的课程内容查询
    const res = await getKnowledgeContent(subInfo.syllabusId)
    res.data.data.forEach((value,index) =>{
      courseData.push(value)
      // courseData[index].class_target_id = value.class_target_id
      // courseData[index].class_target_name = value.class_target_name
      // courseData[index].unit_knowledge_id = value.unit_knowledge_id
      // courseData[index].unit_knowledge_name = value.unit_knowledge_name
      // courseData[index].tec_content = value.tec_content
      // courseData[index].tec_request = value.tec_request
  
    })
  }
  const getAimContent = async () => {
    await getCourseContent(); // 等待getCourseContent执行完成
    // 8888
    // 单元知识点对应的课程目标查询
    // const resAim = await getKnowledgeTarget(subInfo.syllabusId);
    // // resAim.data.data.forEach((value, index) => {
    // // console.log('courseDataTTTT',index,courseData[index].unit_knowledge_id);
    // //   // console.log(value, index, 'wwwww');
    // //   if (value.unit_knowledge_id === courseData[index].unit_knowledge_id) {
    // //     if (courseData[index].class_target_name) {
    // //       courseData[index].class_target_name += value.class_target_name;
    // //     } else {
    // //       courseData[index].class_target_name = value.class_target_name;
    // //     }
    // //   } 
    // //   // else {
    // //   //   console.log('eee');
    // //   //   console.log(value.unit_knowledge_id, courseData[index].unit_knowledge_id, '22222222222222222');
    // //   // }
    // // });
    // // console.log('resAim00000', courseData);
    // for(let i = 0;i < courseData.length;i++){
    //   for(let j = 0 ;j < resAim.data.data.length;j++){
    //     if (resAim.data.data[j].unit_knowledge_id === courseData[i].unit_knowledge_id) {
    //       if (courseData[i].class_target_name) {
    //         courseData[i].class_target_name += '、'
    //         courseData[i].class_target_name += resAim.data.data[j].class_target_name;
    //       } else {
    //         courseData[i].class_target_name = resAim.data.data[j].class_target_name;
    //       }
    //     } 
    //   }
    // }
  };
  
  ////课程教学进度查询
  const teachingSchedule = reactive([])
  const getPlan = async () =>{
    const res = await getCourseSchedule(subInfo.syllabusId)
    res.data.data.forEach(value =>{
      teachingSchedule.push(value)
    })
  }
  const getTotal = (column) => {
  // 计算指定列的合计值
  return teachingSchedule.reduce((total, item) => total + item[column], 0);
};
  //获取教学方法
  const methodContent = ref()
  const getTeachingMethod = async () =>{
    const res = await getCourseMethods(subInfo.syllabusId)
    methodContent.value = res.data.data[0].content
  }
  
  //7考核方式
  const examMethodContent = reactive({})
  const getExamMethod = async () =>{
    const res = await getExamineMethod(subInfo.syllabusId)
    examMethodContent.assess_manner = res.data.data[0].assess_manner
    examMethodContent.examination_manner = res.data.data[0].examination_manner
    examMethodContent.examination_time = res.data.data[0].examination_time
    examMethodContent.content = res.data.data[0].content
  }
  
  //8课程考核成绩评定方法  考核评定
  //考核权重
  const examineWeight = reactive([])
  //考核说明
  const examineIllustrate = ref([])
  //一级考核
  const oneExamine = reactive([])
  //二级考核
  const twoExamine = reactive([])
  const getExamineAssess = async () =>{
    //课程目标支撑环节权重系数查询
    const resWeight = await getWeightSupport(subInfo.syllabusId)
    resWeight.data.data.forEach((value,index) =>{
      examineWeight.push(value)
    })
    //获取考核说明
    const resIllustrate = await getWeightIllustrate(subInfo.syllabusId)
    examineIllustrate.value = resIllustrate.data.data[0].content
    //一级考核
    const resOne = await getExamineTarget(subInfo.syllabusId)
    resOne.data.data.forEach(( value,index) =>{
      oneExamine.push(value)
    })
    // 二级考核
    // 8888
    // const resTwo = await getExamineTargetTow(subInfo.syllabusId)
    // // resTwo.data.data.forEach((value,index) =>{
    // //   twoExamine.push(value)
    // // })
    // //考核目标表
    // const resBiao = await getExamineTargetChart(subInfo.syllabusId)
    // for(let i = 0;i < resTwo.data.data.length;i++){
    //   for(let j = 0; j < resBiao.data.data.length;j++){
    //     if(resTwo.data.data[i].Level_1_assessment_id === resBiao.data.data[j].Level_1_assessment_id){
    //       twoExamine.push({
    //         Level_1_assessment_id:resTwo.data.data[i].Level_1_assessment_id,
    //         Level_1_assessment_content:resTwo.data.data[i].Level_1_assessment_content,
    //         content:resTwo.data.data[i].content,
    //         point_name:resBiao.data.data[j].point_name,
    //         index_Point_id:resBiao.data.data[j].index_Point_id,
    //         proportion:resBiao.data.data[j].content
  
    //       })
    //     }
    //   }
    // }
  }
  //合并考核单元格
  function calculateExamineRowspan(row) {
  let count = 1;
//   获取courseData中第一个和row相同的数据的索引，如果数组中不存在满足条件的元素，则返回 -1
  const currentIndex = oneExamine.findIndex(item => item === row);
  for (let i = currentIndex + 1; i < oneExamine.length; i++) {
    if (oneExamine[i].content === row.content) {
      count++;
    } else {
      break;
    }
  }
  return count;
}
//合并课程目标单元格
function calculateAimRowspan(row) {
  let count = 1;
//   获取courseData中第一个和row相同的数据的索引，如果数组中不存在满足条件的元素，则返回 -1
  const currentIndex = examineWeight.findIndex(item => item === row);
  for (let i = currentIndex + 1; i < examineWeight.length; i++) {
    if (examineWeight[i].class_target_name === row.class_target_name) {
      count++;
    } else {
      break;
    }
  }
  return count;
}
  //9课程目标达成度评价
  const evaluateContent1 = reactive({})
  let evaluateContent2 = reactive({})
  const getFinishEvaluate = async () =>{
    const resData1 = await getEvaluationMechanism(subInfo.syllabusId)
    evaluateContent1.agencies = resData1.data.data[0].agencies
    evaluateContent1.cycle = resData1.data.data[0].cycle
    evaluateContent1.data = resData1.data.data[0].data
    const resData2 = await getEvaluationWay(subInfo.syllabusId)
    evaluateContent2.one = resData2.data.data[0].one
    evaluateContent2.two = resData2.data.data[0].two
    evaluateContent2.three = resData2.data.data[0].three
  }
  
  // 10本课程各个课程目标的权重
  const weightData = reactive([])
  const getAimweight = async () =>{
    const res = await getTargetWeight(subInfo.syllabusId)
    res.data.data.forEach((value,index) =>{
      weightData.push(value)
    })
  }
  
  //11持续改进
  const improveData = ref()
  const getImproveData = async () =>{
    const res = await getContinuousImprovement(subInfo.syllabusId)
    improveData.value = res.data.data[0].content
  }
  
  //12十二、教材和参考书目
  const bookData = reactive({})
  const getBookData = async () =>{
    const res = await getBookAndBibliography(subInfo.syllabusId)
    // bookData.push(res.data.data[0])
    bookData.t_book=res.data.data[0].t_book
    bookData.refer_book=res.data.data[0].refer_book
    bookData.basis=res.data.data[0].basis
  }
  //导出大纲
  const exportToPDF = () => {
    isShowTop.value = !isShowTop.value
    const element = document.querySelector('.content-to-export');
    const options = {
      margin: [10, 16, 10, 0],
      filename: 'exported-file.pdf',
      image: { type: 'jpeg', quality: 0.98 },
      html2canvas: { scale: 3, pagebreak: { mode: 'avoid-all', before: '.avoid-page-break', after: '.avoid-page-break' } },
      jsPDF: { unit: 'mm', format: 'a3', orientation: 'portrait' }
    };
  
    const pdfPromise = html2pdf().from(element).set(options).save();
    pdfPromise.then(() => {
      // PDF 导出完成后执行的操作
      isShowTop.value = !isShowTop.value
    })
  }
  
  const tableRowClassName = ({ row, rowIndex }) => {
    if (rowIndex % 2 === 0) {
      return { backgroundColor: '#fdf6ec' };
    } else {
      return { backgroundColor: '#f0f9eb' };
    }
  }
  // 处理菜单项选择事件
  const handleMenuSelect = (index) => {
    // 更新激活的菜单项
    activeMenu.value = index;
    // 滚动到相应的内容区域
    scrollToSection(index);
  };
  
  // 滚动到指定的内容区域
  const scrollToSection = (sectionId) => {
    const section = document.getElementById(sectionId);
    const container = document.querySelector('.content-to-body');
    if (section && container) {
      // 计算目标元素的顶部相对于容器顶部的位置
      let sectionTop = section.offsetTop;
  
      // 循环遍历，累加所有父元素的offsetTop值，直到达到container
      let parent = section.offsetParent;
      while (parent !== container && parent !== null) {
        sectionTop += parent.offsetTop;
        parent = parent.offsetParent;
      }
  
      // 使用容器的 scrollTo 方法实现平滑滚动
      container.scrollTo({
        top: sectionTop - container.offsetTop,
        behavior: 'smooth'
      });
    }
  };
  
  const updateSidebarHighlight = () => {
    const container = document.querySelector('.content-to-export');
    const sections = document.querySelectorAll('.content-to-export > .box-card');
    let currentActive = null;
    let minDistance = Infinity;
    sections.forEach(section => {
      const rect = section.getBoundingClientRect();
      const containerRect = container.getBoundingClientRect();
      const topDistance = Math.abs(rect.top - containerRect.top);
  
      // 查找与容器顶部距离最近的章节
      if (topDistance < minDistance) {
        minDistance = topDistance;
        currentActive = section.id;
      }
    });
    if (currentActive) {
      activeMenu.value = currentActive;
    }
  };
  
  // 组件挂载后添加滚动监听器
  onMounted(() => {
    //进入页面时判断一下是否有大纲路径
    getFilePath()
  
    const container = document.querySelector('.content-to-export');
    container.addEventListener('scroll', updateSidebarHighlight);
  
    //进页面时判断有没有上传教学大纲
    checkLocalData()
  });
  </script>
  
  <style scoped lang="scss">
  $active-gradient: linear-gradient(to right, #d0bfdd, #d9e8fc); // 激活状态的渐变色
  $inactive-gradient: linear-gradient(to right, #f4ece8, #898485); // 非激活状态的渐变色
  $underline-height: 2px; // 下划线的高度
  $underline-offset: 10px; // 下划线与文字的间距
  // 定义一个mixin用于渐变背景
  @mixin gradient-bg($startColor, $endColor) {
    background: $startColor; // 老的浏览器兼容
    background: linear-gradient(to right, $startColor, $endColor);
  }
  
  $inactive-gradient-start: #beb6d1; // 非激活状态的开始颜色
  $inactive-gradient-end: #c8bada; // 非激活状态的结束颜色
  $active-gradient-start: #b397c1; // 激活状态的开始颜色
  $active-gradient-end: #c5a5d2; // 激活状态的结束颜色
  
  .el-table .warning-row {
    --el-table-tr-bg-color: var(--el-color-warning-light-9);
  }
  
  .el-table .success-row {  
    --el-table-tr-bg-color: var(--el-color-success-light-9);
  }
  
  @media print {
    .avoid-page-break {
        page-break-inside: avoid !important;
    }
}
    table {
    border-collapse: collapse;
        margin: 10px 0;
        font-size: 0.9em;
        font-family: sans-serif;
        min-width: 400px;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
    }

    th,
    td {
        // border: 1px solid black;
        // padding: 8px;
        text-align:center;
        padding: 12px 15px;
        border: 1px solid #dddddd;
    }
    th{
        // background-color: #009879;
        background-color: #F5F7FA;
        // color: #ffffff;
        color: #6d6d6d;
    }
    tr:hover {
        background-color: #f3f3f3;
    }
        .wide {
            width: 320px;
        }

  .outerBox {
    // width:100%;
    display: flex;
    // border: 1px solid rgb(208, 199, 201);
    border-radius: 10px;
    box-shadow: 1px -8px 11px 1px rgba(0, 0, 0, 0.1);
    // background-color: #e2e2f0;
  // height: 70px;
  // height: 100%;
    .sidebar {
      /* 隐藏横向滚动条 */
      width: 12%;
      // border: none; /* 去除边框 */
      background: linear-gradient(to bottom right, #d6d6ee, rgb(201 104 30 / 0%));
      backdrop-filter: blur(5px);

      // background: lightgray;
            padding: 0;
            position: fixed;
            top:175px;
            bottom: 0;

      .el-aside{
            width: 100%;
        }
      .sidebar-menu {
        box-sizing: border-box;
        width: 100%;
        margin: 0px 0 0 -11px;
        border-radius: 10px;
        // overflow-x: hidden;
        background-color: transparent;
        overflow:hidden;
        margin:0 auto;
  
        // 应用渐变背景
        // @include gradient-bg(#f4ece8, #898485);
        // border: 5px solid rgb(208, 199, 201);
        .el-menu-item {
          color: #496773;
          font-size: 0.7rem;
          // position: relative; // 为伪元素定位做准备
          margin-bottom: $underline-offset; // 为下划线留出空间
          height:40px;
          margin: 0 auto;
          width: 80%;
          &:not(.is-active)::after {
            content: '';
            position: absolute;
            bottom: -$underline-height;
            left: 0;
            right: 0;
            height: $underline-height;
            background: linear-gradient(to right, $inactive-gradient-end, transparent); // 从粗到细的渐变效果
            border-radius: 1px;
          }
          &:hover {
            background-color: #d9e8fc9c; // 鼠标悬停时的背景色
  
            &::after {
              background: linear-gradient(to right, $active-gradient-end, transparent); // 保持渐变效果
            }
          }
        }
      }
    }
  
    .content-to-export {
      // overflow-y: auto;
      /* 允许垂直方向上的滚动 */
      // height: 100vh;
      /* 或者根据您的布局需求设定固定高度 */
      flex: 1;
      // margin-left: 10px;
      // width:70%;
      // overflow: scroll;

      &::-webkit-scrollbar {
        width: 10px;
      }
  
      &::-webkit-scrollbar-thumb {
        background-color: #cbb1ce87;
        /* 设置滚动条滑块颜色 */
        border-radius: 10px;
        /* 设置滚动条滑块圆角 */
      }
  
      .headerTest {
        width: 100%;
        background-color: #ddd4e6;
        color: #64748b;
        text-align: center;
        height: 50px;
        line-height: 50px;
        font-size: 24px;
        font-family: Arial, sans-serif;
        border-radius: 5px;
        border-top: none;
        border-right: none;
        border-bottom: none;
        margin-bottom: 10px;
        margin-right: 10px;
      }
  
      .box-card {
        box-sizing: border-box;
        width: 100%;
        margin-left: -10px;
        margin-bottom: 8px;
        padding: 10px;
        .card-header {
            font-size:16px;
            h4{
                font-size:20px
            }
        }
        .tableCard{
                background-color: #f4f4fc;
                border-radius: 10px;
                .leftTableOF_tableCard{
                    width: 50%;
                    float: left;
                    border:1px solid black;
                    border-collapse: collapse;
                    border-right: none;
                    margin-bottom: 20px;
                }
            }
        .statementBox {
          letter-spacing: 2px;
          padding: 10px;
          font-size: 13px;
          padding: 10px;
            ol{
                li{
                    padding: 10px;
                }
            }
        }
  
        .descBox {
          color: #ccc;
          font-size: 12px;
          padding: 10px 0px;
        }
  
        .supportLink {
          padding: 10px;
          font-size: 14px;
        }
      }
    }
    .content-to-body{
      flex: 1;
      margin-left: 10px;
      width:70%;
      position: fixed;
      top: 175px;
      right: 0;
      bottom: 0;
      overflow: scroll;
      overflow-x: hidden;
    }
  }
  
  .diagonal-split-header {
    position: relative;
    height: 60px;
  }
  
  .text-part {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .diagonal-line {
    position: absolute;
    width: 200%;
    top: -48px;
    left: 9px;
    height: 100px;
    background: transparent;
    transform: rotate(-152deg);
    border-top: 1px solid #807878;
  }
  
  // 页面第一部分
  .table-container {
    text-align: center;
    /* 水平居中 */
  }
  
  .table-container>div {
    margin-bottom: 10px;
    /* 添加间距 */
  }
  
  .table-container p {
    display: inline;
    /* 文字和 p 标签在同一行显示 */
    text-decoration: underline;
    /* 给文字添加下划线 */
  }
  
  .table-container {
    display: flex;
    justify-content: center;
    /* 水平居中 */
    align-items: center;
    /* 垂直居中 */
    //   height: 40vh; /* 可以根据实际需要设置高度 */
    margin-bottom: 10px
  }
  .centered-content {
    display: flex;
    align-items: center;
    /* 使用 Flexbox 实现垂直居中 */
    justify-content: center;
    /* 水平居中 */
  }
  
  .marTOP {
    margin-top: 100px;
  }
  //顶部按钮
  .fileportion button {
    // text-align: center;
    // width: 100px;
    padding: 1.3em 3em;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    font-weight: 500;
    color: #000;
    background-color: #d4aaf9;
    border: none;
    border-radius: 45px;
    box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease 0s;
    cursor: pointer;
    outline: none;
    margin-bottom: 10px;
  }
  
  .fileportion button:hover {
    background-color: #23c483;
    box-shadow: 0px 15px 20px rgba(46, 229, 157, 0.4);
    color: #fff;
    transform: translateY(7px);
  }
  
  .fileportion button:active {
    transform: translateY(-1px);
  }
  
  .fileportion span {
    margin-left: 5px;
    margin-top: 15px;
    font-size: 12px;
  }
  
  :deep().el-aside{
    width:100%;
  }
  :deep().sidebar{
    width:100%;
  }
  :deep().sidebar-menu{
    width:100%;
    border:0px
  }
  :deep().el-menu-item{
    width:100%;
    white-space: nowrap; /* 禁止文本换行 */
    overflow: hidden; /* 隐藏溢出的文本 */
    text-overflow: ellipsis; /* 显示省略号以指示被截断的文本 */
  }


  //去除上传成功后的进度显示条
  :deep().el-upload-list--text{
    display: none;
  }
// 以下三个也是去除上传成功后的进度显示条
  // :deep().el-upload-list__item-file-name{
  //   display: none;
  // }
  // :deep().el-upload-list__item-name{
  //   display: none;
  // }
  // :deep().el-upload-list{
  //   display: none;
  // }
  </style>